import React, {Component} from 'react';
import {Router, Scene} from 'react-native-router-flux';
import {themeColor} from '../../config/config';
import {dispatch} from '../../utils/app';
import LoginPage from './routes/LoginPage';
import TabIcon from './routes/HomePage/TabIcon';
import Group from './routes/HomePage/Group';
import Work from './routes/HomePage/Work';
import Me from './routes/HomePage/Me';
import GroupChatPage from './routes/GroupChatPage';
import GroupCreatePage from './routes/GroupCreatePage';
import GroupJoinPage from './routes/GroupJoinPage';

class RouterConfig extends Component {
	
	render() {
	    return (
	      	<Router>
		        <Scene key='root'>
		          	<Scene key='login' component={LoginPage} initial={true} hideNavBar={true} />
		          	<Scene tabs key='home' hideNavBar={true} swipeEnabled={false} animationEnabled={true} tabBarPosition='bottom' activeTintColor={themeColor()}>
		          		<Scene key='homeGroup' component={Group} tabBarLabel='群组' icon={() => <TabIcon type='group' />} hideNavBar={true} onEnter={() => dispatch({type: 'home/changeTab', payload: 'group'})} />
		          		<Scene key='homeWork' component={Work} tabBarLabel='任务' icon={() => <TabIcon type='work' />} hideNavBar={true} onEnter={() => dispatch({type: 'home/changeTab', payload: 'work'})} />
		          		<Scene key='homeMe' component={Me} tabBarLabel='我的' icon={() => <TabIcon type='me' />} hideNavBar={true} onEnter={() => dispatch({type: 'home/changeTab', payload: 'me'})} />
		          	</Scene>
			        <Scene key='groupChat' component={GroupChatPage} hideNavBar={true} />
			        <Scene key='groupCreate' component={GroupCreatePage} hideNavBar={true} />
			        <Scene key='groupJoin' component={GroupJoinPage} hideNavBar={true} />
		        </Scene>
	      	</Router>
	    );
  	}
  	
}

export default <RouterConfig />;